<script setup>

import {ref} from "vue";
import axios from "axios";
import router from "../../router";

//用户名和密码
const username = ref()
const password = ref()

//setToken 函数接受一个 token 参数，并使用 localStorage.setItem 方法将令牌存储到名为 "token" 的键中。
const setToken = (token) => {
  localStorage.setItem('token', token);
}

const login = () => {
  const data = {
    username: username.value,
    password: password.value
  }
  axios.post('/api' + '/login',data).then(res => {
    if (res.data.data===null){
      alert(res.data.msg)
    }else {
      const token = res.data.data
      setToken(token); // 将 token 存储到本地
      router.push('/view'); // 登录成功后跳转到主页
    }
  }).catch()
}


</script>
<template>


  <div class="login-container">
    <el-card class="login-card">
      <h2 class="login-title">登录</h2>
      <el-form  label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
        <div class="login-links">
          <span class="login-link">忘记密码？</span>
          <span class="login-link">注册账号</span>
        </div>
      </el-form>
    </el-card>
  </div>

</template>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.login-card {
  width: 400px;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.login-title {
  font-size: 24px;
  margin-bottom: 20px;
}

.login-links {
  margin-top: 10px;
}

.login-link {
  color: #999;
  cursor: pointer;
  margin-right: 10px;
}

.login-link:hover {
  color: #409eff;
}
</style>